<template>
  <view class="bigtitle">
    <!-- 卡片 -->
    <view class="card">
      <!-- 左侧内容 -->
      <view class="left-content">
        <!-- 标题 -->
        <view class="title-row">
          <text class="title" style="color: #ffffff !important;">{{ meetingInfo.title }}</text>
        </view>

        <!-- 信息行 -->
        <view class="info-row">
          <!-- 第一行：时间和浏览量 -->
          <view class="info-line">
          <!-- 时间 -->
          <view class="info-item">
              <uni-icons type="notification" size="14" color="#ffffff"></uni-icons>
              <text class="text">{{ meetingInfo.time }}</text>
          </view>
          <!-- 浏览量 -->
          <view class="info-item">
              <uni-icons type="eye" size="14" color="#ffffff"></uni-icons>
              <text class="text">{{ meetingInfo.browse }}</text>
            </view>
          </view>
          
          <!-- 第二行：地点 -->
          <view class="info-item location-item">
            <uni-icons type="map-pin-ellipse" size="14" color="#ffffff"></uni-icons>
            <text class="text">{{ meetingInfo.location }}</text>
          </view>
        </view>
      </view>

      <!-- 右侧导航按钮 -->
      <view class="navigate-button">
        <button class="button" @click="handleNavigate">导航</button>
      </view>
    </view>
  </view>

  <!-- 视频 -->
  <view class="video">
    <video
      id="myVideo"
      :src="meetingInfo.video || 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'"
      @error="videoErrorCallback"
      controls
      enable-full-screen
      style="width: 100%;"
    ></video>
  </view>

  <!-- 分段器 -->
  <view class="segment">
    <view
      v-for="(item, index) in segmentItems"
      :key="index"
      class="segment-item"
      :class="{ active: activeSegment === index }"
      @click="handleSegmentClick(index)"
    >
      <text>{{ item }}</text>
    </view>
  </view>

  <!-- 分段器内容 -->
  <view class="segment-content">
    <!-- 聊天室 -->
    <view v-if="activeSegment === 0" class="chat-container">
      <!-- 消息列表 -->
      <scroll-view 
        class="message-list" 
        scroll-y="true" 
        :scroll-into-view="scrollToId"
        :scroll-top="scrollTop"
        :scroll-with-animation="true"
      >
        <view
          v-for="(message, index) in messages"
          :key="index"
          :class="['message-item', message.isUser ? 'user-message' : 'other-message']"
          :id="`message-${index}`"
        >
          <!-- 头像 -->
          <image
            class="avatar"
            :src="message.avatar"
            mode="aspectFill"
          ></image>

          <!-- 消息内容 -->
          <view class="message-content">
            <!-- 昵称和时间 -->
            <view class="info">
              <text class="nickname">{{ message.nickname }}</text>
              <text class="time">{{ formatTime(message.time) }}</text>
            </view>
            <!-- 消息气泡 -->
            <view class="message-text">{{ message.text }}</view>
          </view>
        </view>
      </scroll-view>

      <!-- 输入框和发送按钮 -->
      <view class="input-container">
        <input
          class="input-box"
          v-model="inputText"
          placeholder="请输入消息"
          confirm-type="send"
          @confirm="sendMessage"
        />
        <button class="send-button" @click="sendMessage">发送</button>
      </view>
    </view>

    <!-- 资料下载 -->
    <view v-if="activeSegment === 1" class="download-container">
      <!-- 竖向滚动区域 -->
      <scroll-view class="scroll-view" scroll-y="true">
        <!-- 动态生成卡片 -->
        <view v-for="(item, index) in cards" :key="index" class="download-card">
          <!-- 卡片标题和下载按钮 -->
          <view class="card-header">
            <text class="card-title">{{ item.name }}</text>
            <button class="download-button" @click="handleDownload(item.id)">
              <text>下载</text>
            </button>
          </view>
          <!-- 卡片封面图片 -->
          <image :src="item.image" mode="aspectFill" class="cover-image"></image>
          <!-- 卡片正文内容 -->
          <text class="card-body">
            {{ item.description }}
          </text>
        </view>
      </scroll-view>
    </view>

    <!-- 会议议程 -->
    <view v-if="activeSegment === 2" class="agenda-container">
      <view v-if="timelineData.length === 0" class="empty-agenda">
        <text>暂无会议议程</text>
      </view>
      <view v-else class="timeline">
          <view
            v-for="(item, index) in timelineData"
            :key="index"
          class="timeline-item"
          :class="{ 'past': item.status === 'past', 'current': item.status === 'current' }"
        >
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="time-section">
              <text class="time">{{ item.time }}</text>
              </view>
            <view class="content-section">
              <text class="agenda-title">{{ item.title }}</text>
              <text v-if="item.speaker" class="speaker">演讲者: {{ item.speaker }}</text>
              <text v-if="item.content" class="description">{{ item.content }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    
    <!--AI问答-->
    <view v-if="activeSegment === 3" class="chat-container">
        <!-- 消息列表 -->
      <scroll-view 
        class="message-list" 
        scroll-y="true" 
        :scroll-into-view="aiScrollToId"
      >
          <view
            v-for="(message, index) in aiMessages"
            :key="index"
            :class="['message-item', message.isUser ? 'user-message' : 'other-message']"
            :id="`ai-message-${index}`"
          >
            <!-- 头像 -->
            <image
              class="avatar"
              :src="message.avatar"
              mode="aspectFill"
            ></image>
            <!-- 消息内容 -->
            <view class="message-content">
              <!-- 昵称和时间 -->
              <view class="info">
                <text class="nickname">{{ message.nickname }}</text>
                <text class="time">{{ formatTime(message.time) }}</text>
              </view>
              <!-- 消息气泡 -->
              <view class="message-text">{{ message.text }}</view>
            </view>
          </view>
        </scroll-view>
        <!-- 输入框和发送按钮 -->
        <view class="input-container">
          <input
            class="input-box"
            v-model="aiInputText"
            placeholder="请输入消息"
            confirm-type="send"
            @confirm="sendAiMessage"
          />
          <button class="send-button" @click="sendAiMessage">发送</button>
        </view>
      </view>
    
    <!--AI总结-->
    <view v-if="activeSegment === 4" class="chat-container">
      <!-- 顶部操作栏 -->
      <view class="ai-summary-header">
        <text class="ai-summary-title">实时AI总结</text>
        <button class="clear-button" @click="clearAiSummary">清空记录</button>
      </view>
      
      <!-- 消息列表 -->
      <scroll-view 
        class="message-list ai-summary-list" 
        scroll-y="true" 
        :scroll-into-view="aiSummaryScrollToId"
        :scroll-top="aiSummaryScrollTop"
        :scroll-with-animation="true"
      >
        <view
          v-for="(message, index) in aiSummaryMessages"
          :key="index"
          :class="['message-item', message.isUser ? 'user-message' : 'other-message']"
          :id="`ai-summary-${index}`"
        >
          <!-- 头像 -->
          <image
            class="avatar"
            :src="message.avatar"
            mode="aspectFill"
          ></image>
          <!-- 消息内容 -->
          <view class="message-content">
            <!-- 昵称和时间 -->
            <view class="info">
              <text class="nickname">{{ message.nickname }}</text>
              <text class="time">{{ formatTime(message.time) }}</text>
            </view>
            <!-- 消息气泡 -->
            <view class="message-text">{{ message.text }}</view>
          </view>
        </view>
        
        <!-- 无消息提示 -->
        <view v-if="aiSummaryMessages.length === 0" class="empty-message">
          <text>AI正在监听会议，即将生成实时总结...</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, reactive } from 'vue';
import { 
  initChatSocket, 
  sendChatMessage, 
  closeChatSocket, 
  isChatSocketConnected,
  initAiSummarySocket,
  closeAiSummarySocket,
  isAiSummarySocketConnected
} from '/api/detail.js';
import { getMeetingDetail, getMeetingFiles } from '/api/meet.js';

// 会议详情相关状态
const meetDetail = ref(null);
const meetId = ref('');

// 会议基本信息 - 从URL参数或API获取
const meetingInfo = reactive({
  title: '会议标题加载中...',
  time: '加载中...',
  location: '加载中...',
  type: '',
  browse: 0,
  isOnline: 1,
  video: ''
});

// 用户信息（可从全局状态获取）
const userInfo = {
  username: '张三',
  headImg: '/static/logo.png'
};

// WebSocket相关状态
const messages = ref([]);
const inputText = ref('');
const scrollToId = ref('');
const scrollTop = ref(0);

// AI总结相关状态
const aiSummaryMessages = ref([]);
const aiSummaryScrollToId = ref('');
const aiSummaryScrollTop = ref(0);

// 解析URL查询参数
const parseQueryParams = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  
  // 获取页面路由上的查询参数
  let options = {};
  if (currentPage && currentPage.options) {
    options = currentPage.options;
  } else {
    // 尝试从页面路由上获取参数
    const route = window.location.href;
    const queryParams = route.split('?')[1];
    
    if (queryParams) {
      queryParams.split('&').forEach(param => {
        const [key, value] = param.split('=');
        if (key && value) {
          options[key] = decodeURIComponent(value);
        }
      });
    }
  }
  
  console.log('解析URL参数:', options);
  
  // 解析meetId
  if (options.meetId) {
    meetId.value = options.meetId;
    console.log('从URL参数解析到meetId:', meetId.value);
  }
  
  // 解析会议信息
  try {
    // 尝试解析标题
    if (options.title) {
      meetingInfo.title = decodeURIComponent(options.title);
      console.log('从URL参数解析到title:', meetingInfo.title);
    }
    
    // 尝试解析时间
    if (options.time) {
      meetingInfo.time = decodeURIComponent(options.time);
      console.log('从URL参数解析到time:', meetingInfo.time);
    }
    
    // 尝试解析地点
    if (options.location) {
      meetingInfo.location = decodeURIComponent(options.location);
      console.log('从URL参数解析到location:', meetingInfo.location);
    }
    
    // 尝试解析视频URL
    if (options.video) {
      meetingInfo.video = decodeURIComponent(options.video);
      console.log('从URL参数解析到video:', meetingInfo.video);
    }
    
    // 尝试解析浏览量
    if (options.browse) {
      meetingInfo.browse = parseInt(options.browse) || 0;
      console.log('从URL参数解析到browse:', meetingInfo.browse);
    }
    
    // 尝试解析是否在线
    if (options.isOnline) {
      meetingInfo.isOnline = parseInt(options.isOnline) || 0;
      console.log('从URL参数解析到isOnline:', meetingInfo.isOnline);
    }
  } catch (error) {
    console.error('解析URL参数出错:', error);
  }
  
  // 如果没有解析到必要信息，则设置默认值
  if (!meetingInfo.title) meetingInfo.title = '会议标题加载中...';
  if (!meetingInfo.time) meetingInfo.time = '加载中...';
  if (!meetingInfo.location) meetingInfo.location = '加载中...';
  if (!meetingInfo.browse) meetingInfo.browse = 0;
  if (meetingInfo.isOnline === undefined) meetingInfo.isOnline = 1;
};

// 监听标签页切换
watch(() => activeSegment.value, (newValue, oldValue) => {
  console.log('activeSegment changed from', oldValue, 'to', newValue);
  
  // 从聊天室切换出去，关闭聊天连接
  if (oldValue === 0) {
    console.log('离开聊天室，关闭WebSocket连接');
    closeChatSocket();
  }
  
  // 从AI总结切换出去，关闭AI总结连接
  if (oldValue === 4) {
    console.log('离开AI总结，关闭WebSocket连接');
    closeAiSummarySocket();
    // 保存AI总结消息到本地缓存
    saveAiSummaryToCache();
  }
  
  // 切换到聊天室，初始化聊天连接
  if (newValue === 0) {
    console.log('进入聊天室，初始化WebSocket连接');
    setTimeout(() => {
      initSocket();
    }, 300);
  }
  
  // 切换到资料下载页面，获取文件列表
  if (newValue === 1) {
    console.log('进入资料下载页面，获取文件列表');
    fetchMeetingFiles();
  }
  
  // 切换到会议议程，获取会议详情
  if (newValue === 2) {
    console.log('进入会议议程，获取会议详情');
    fetchMeetingDetail();
  }
  
  // 切换到AI总结，初始化AI总结连接
  if (newValue === 4) {
    console.log('进入AI总结，初始化WebSocket连接');
    setTimeout(() => {
      initAiSummary();
    }, 300);
  }
});

// 初始化WebSocket
const initSocket = () => {
  console.log('开始初始化WebSocket连接...');
  
  if (!meetId.value) {
    console.error('会议ID为空，无法初始化WebSocket连接');
    uni.showToast({
      title: '会议ID缺失，无法连接聊天室',
      icon: 'none'
    });
    return;
  }
  
  return initChatSocket({
    meetId: meetId.value,
    username: userInfo.username,
    headImg: userInfo.headImg,
    onMessage: handleSocketMessage,
    onOpen: () => {
      console.log('聊天室连接成功');
      uni.showToast({ title: '聊天室已连接', icon: 'success' });
    },
    onClose: () => {
      console.log('聊天室连接关闭');
      uni.showToast({ title: '聊天室已断开', icon: 'none' });
    },
    onError: (err) => {
      console.error('聊天室连接错误:', err);
      uni.showToast({ 
        title: `连接错误: ${err.message || err}`, 
        icon: 'none',
        duration: 2000
      });
    }
  });
};

// 处理WebSocket消息
const handleSocketMessage = ({ type, data }) => {
  if (type === 'history') {
    // 历史消息（需反转顺序：旧 → 新）
    messages.value = data.reverse().map(msg => formatMessage(msg));
    // 历史消息加载完成后滚动到底部
    setTimeout(() => {
      scrollToBottom();
    }, 300); // 稍微延迟一点，确保DOM更新完成
  } else if (type === 'message') {
    // 检查是否是自己发送的消息，如果是则忽略（因为已经在本地添加了）
    if (data.username !== userInfo.username) {
      console.log('收到他人消息:', data);
    messages.value.push(formatMessage(data));
      // 收到新消息后滚动到底部
  scrollToBottom();
    } else {
      console.log('收到自己的消息，忽略', data);
    }
  }
};

// 格式化消息
const formatMessage = (rawMsg) => {
  console.log('格式化消息原始数据:', rawMsg);
  
  // 处理内容字段
  let content = '';
  
  // 如果rawMsg本身是字符串，直接使用
  if (typeof rawMsg === 'string') {
    content = rawMsg;
  } 
  // 处理消息对象
  else {
    try {
      // 处理各种可能的消息格式
      if (rawMsg.content) {
        // 如果content是字符串
        if (typeof rawMsg.content === 'string') {
          // 尝试解析JSON字符串
          if (rawMsg.content.startsWith('{') && rawMsg.content.endsWith('}')) {
            try {
              const contentObj = JSON.parse(rawMsg.content);
              content = contentObj.content || rawMsg.content;
            } catch (e) {
              // 如果解析失败，直接使用原始字符串
              content = rawMsg.content;
            }
          } else {
            content = rawMsg.content;
          }
        } 
        // 如果content是对象
        else if (typeof rawMsg.content === 'object' && rawMsg.content !== null) {
          content = rawMsg.content.content || JSON.stringify(rawMsg.content);
        }
      } else {
        // 如果没有content字段，可能消息本身就是内容
        content = rawMsg.text || rawMsg.message || JSON.stringify(rawMsg);
      }
    } catch (e) {
      console.error('消息格式化错误:', e);
      content = JSON.stringify(rawMsg);
    }
  }
  
  console.log('格式化后的内容:', content);
  
  return {
    avatar: rawMsg.headImg || '/static/logo.png',
    nickname: rawMsg.username || '匿名用户',
    text: content,
    time: new Date(parseInt(rawMsg.time) || Date.now()),
    isUser: rawMsg.username === userInfo.username
  };
};

// 滚动到底部
const scrollToBottom = () => {
  if (messages.value.length > 0) {
    const lastIndex = messages.value.length - 1;
    setTimeout(() => {
      scrollToId.value = `message-${lastIndex}`;
      // 使用nextTick确保DOM更新后再滚动
      uni.nextTick(() => {
        // 获取消息列表的滚动区域
        const query = uni.createSelectorQuery();
        query.select('.message-list').boundingClientRect();
        query.exec((res) => {
          if (res && res[0]) {
            // 计算滚动位置为区域的最大高度
            scrollTop.value = res[0].height * 1000; // 使用一个足够大的值确保滚动到底部
            console.log('滚动到底部，高度:', scrollTop.value);
          }
        });
      });
    }, 100);
  }
};

// 发送消息
const sendMessage = async () => {
  if (!inputText.value.trim()) return;

  try {
    // 检查连接状态
    if (!isChatSocketConnected()) {
      console.log('WebSocket未连接，尝试重新连接...');
      await initSocket();
    }

    // 先显示自己发送的消息（本地预览）
    const messageContent = inputText.value.trim();
    const myMessage = {
      avatar: userInfo.headImg,
      nickname: userInfo.username,
      text: messageContent,
      time: new Date(),
      isUser: true
    };
    
    messages.value.push(myMessage);
    // 先滚动到底部显示自己的消息
    scrollToBottom();
    
    // 清空输入框
    inputText.value = '';
    
    // 然后发送到服务器
    const success = await sendChatMessage(messageContent);
    if (!success) {
      uni.showToast({ 
        title: '发送失败，请重试', 
        icon: 'none',
        duration: 2000
      });
    }
  } catch (error) {
    console.error('发送消息失败:', error);
    uni.showToast({ 
      title: '发送失败，请重试', 
      icon: 'none',
      duration: 2000
    });
  }
};

// 时间格式化
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// ==================== 以下是原有其他组件代码 ====================
// 导航按钮点击事件
const handleNavigate = () => {
  // 判断是否有会议地点信息
  if (!meetingInfo.location) {
    uni.showToast({
      title: '会议地点信息缺失',
      icon: 'none'
    });
    return;
  }
  
  // 导航到导航页面，并传递地址信息
  uni.navigateTo({
    url: '/pages/test1/test1',
    success: (res) => {
      // 传递目的地地址给导航页面
      const eventChannel = res.eventChannel;
      eventChannel.emit('acceptDataFromOpener', { 
        address: meetingInfo.location
      });
    }
  });
};

// 分段器逻辑
const segmentItems = ref(['聊天室', '资料下载', '会议议程', 'AI问答', 'AI总结']);
const activeSegment = ref(0);

const handleSegmentClick = (index) => {
  console.log('分段器点击事件:', index);
  
  // 确保activeSegment是响应式的，使用.value更新
  if (activeSegment.value === index) {
    console.log('相同标签，不做切换');
    return;
  }
  
  // 保存旧值用于判断
  const oldValue = activeSegment.value;
  console.log('从分段', oldValue, '切换到', index);
  
  // 更新分段器状态
  activeSegment.value = index;
  
  // 根据不同分段执行相应操作
  if (oldValue === 0) {
    // 从聊天室切出
    closeChatSocket();
    console.log('聊天室WebSocket已关闭');
  } else if (oldValue === 4) {
    // 从AI总结切出
    closeAiSummarySocket();
    console.log('AI总结WebSocket已关闭');
  }
  
  if (index === 0) {
    // 切换到聊天室
    initSocket();
    console.log('聊天室WebSocket已初始化');
  } else if (index === 1) {
    // 切换到会议议程
    fetchMeetingFiles();
    console.log('获取会议文件数据');
  } else if (index === 2) {
    // 切换到会议议程
    fetchMeetingDetail();
    console.log('获取会议议程数据');
  } else if (index === 4) {
    // 切换到AI总结
    initAiSummary();
    console.log('AI总结WebSocket已初始化');
  }
};

// 视频错误回调
const videoErrorCallback = (e) => {
  uni.showModal({
    content: e.target.errMsg,
    showCancel: false,
  });
};

// 资料下载
const cards = ref([]);

// 获取会议文件列表
const fetchMeetingFiles = async () => {
  if (!meetId.value) {
    console.error('会议ID为空，无法获取会议文件列表');
    return;
  }
  
  try {
    console.log('开始获取会议文件列表，meetId:', meetId.value);
    const res = await getMeetingFiles(meetId.value);
    console.log('会议文件列表获取成功:', res);
    
    // 更新文件列表数据
    if (res && Array.isArray(res)) {
      cards.value = res.map(file => ({
        id: file.id,
        name: file.name || '未命名文件',
        image: file.img || '/static/icon/meet.image/AI引领.webp',
        description: file.description || '暂无描述',
        url: file.url || '' // 文件下载链接
      }));
    } else {
      console.log('无文件数据或格式不正确');
      cards.value = [];
    }
  } catch (error) {
    console.error('获取会议文件列表失败:', error);
    uni.showToast({ title: '获取文件列表失败', icon: 'none' });
  }
};

const handleDownload = (id) => {
  const file = cards.value.find((item) => item.id === id);
  if (!file) {
  uni.showToast({
      title: '找不到该文件',
    icon: 'none'
    });
    return;
  }
  
  if (!file.url) {
    uni.showToast({
      title: '文件链接不存在',
      icon: 'none'
    });
    return;
  }
  
  console.log('开始下载文件:', file.name, file.url);
  uni.showLoading({
    title: '下载中...'
  });
  
  // 使用uni.downloadFile下载文件
  uni.downloadFile({
    url: file.url,
    success: (res) => {
      uni.hideLoading();
      if (res.statusCode === 200) {
        // 保存文件到本地
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.showToast({
              title: '下载成功',
              icon: 'success'
            });
            console.log('文件已保存:', saveRes.savedFilePath);
            
            // 打开文件
            uni.openDocument({
              filePath: saveRes.savedFilePath,
              success: () => {
                console.log('打开文档成功');
              },
              fail: (err) => {
                console.error('打开文档失败:', err);
                uni.showToast({
                  title: '无法打开此类型文件',
                  icon: 'none'
                });
              }
            });
          },
          fail: (err) => {
            console.error('保存文件失败:', err);
            uni.showToast({
              title: '保存文件失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '下载失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      uni.hideLoading();
      console.error('下载文件失败:', err);
      uni.showToast({
        title: '下载失败',
        icon: 'none'
      });
    }
  });
};

// 会议议程
const timelineData = ref([]);

// AI问答
const aiMessages = ref([
  {
    avatar: '/static/logo.png',
    nickname: 'AI助手',
    text: '你好，我是AI助手，有什么我可以帮您的吗？',
    time: new Date('2023-10-01T08:30:00'),
    isUser: false,
  }
]);
const aiInputText = ref('');
const aiScrollToId = ref('');
const sendAiMessage = () => {
  if (!aiInputText.value.trim()) return;
  const newMessage = {
    avatar: '/static/logo.png',
    nickname: '我',
    text: aiInputText.value.trim(),
    time: new Date(),
    isUser: true,
  };
  aiMessages.value.push(newMessage);
  aiInputText.value = '';
  aiScrollToId.value = `ai-message-${aiMessages.value.length - 1}`;
};

// 初始化AI总结WebSocket
const initAiSummary = () => {
  console.log('开始初始化AI总结WebSocket连接...');
  
  // 先加载缓存中的历史消息
  loadAiSummaryFromCache();
  
  return initAiSummarySocket({
    meetId: meetId.value, // 使用获取到的会议ID
    onMessage: handleAiSummaryMessage,
    onOpen: () => {
      console.log('AI总结连接成功');
      uni.showToast({ title: 'AI总结已连接', icon: 'success' });
    },
    onClose: () => {
      console.log('AI总结连接关闭');
      uni.showToast({ title: 'AI总结已断开', icon: 'none' });
    },
    onError: (err) => {
      console.error('AI总结连接错误:', err);
      uni.showToast({ 
        title: `连接错误: ${err.message || err}`, 
        icon: 'none',
        duration: 2000
      });
    }
  });
};

// 处理AI总结WebSocket消息
const handleAiSummaryMessage = ({ type, data }) => {
  console.log('收到AI总结消息:', type, data);
  
  if (type === 'attendee' || type === 'ai_summary') {
    // 格式化并添加消息
    const formattedMessage = formatAiSummaryMessage(data);
    aiSummaryMessages.value.push(formattedMessage);
    
    // 滚动到底部
    scrollAiSummaryToBottom();
    
    // 保存到缓存
    saveAiSummaryToCache();
  }
};

// 格式化AI总结消息
const formatAiSummaryMessage = (rawMsg) => {
  console.log('格式化AI总结消息:', rawMsg);
  
  // 处理内容字段
  let content = '';
  let source = 'AI助手';
  
  if (typeof rawMsg === 'string') {
    content = rawMsg;
  } else {
    try {
      if (rawMsg.content) {
        if (typeof rawMsg.content === 'string') {
          content = rawMsg.content;
        } else if (typeof rawMsg.content === 'object' && rawMsg.content !== null) {
          content = rawMsg.content.summary || rawMsg.content.content || JSON.stringify(rawMsg.content);
        }
      } else {
        content = rawMsg.summary || rawMsg.text || rawMsg.message || JSON.stringify(rawMsg);
      }
      
      // 提取来源信息
      if (rawMsg.source) {
        source = rawMsg.source;
      } else if (rawMsg.type === 'system') {
        source = '系统';
      }
    } catch (e) {
      console.error('AI总结消息格式化错误:', e);
      content = JSON.stringify(rawMsg);
    }
  }
  
  return {
    avatar: '/static/logo.png', // AI助手头像
    nickname: source,
    text: content,
    time: new Date(parseInt(rawMsg.time) || Date.now()),
    isUser: false // AI总结消息均非用户发送
  };
};

// 滚动AI总结到底部
const scrollAiSummaryToBottom = () => {
  if (aiSummaryMessages.value.length > 0) {
    const lastIndex = aiSummaryMessages.value.length - 1;
    setTimeout(() => {
      aiSummaryScrollToId.value = `ai-summary-${lastIndex}`;
      
      // 使用nextTick确保DOM更新后再滚动
      uni.nextTick(() => {
        // 获取消息列表的滚动区域
        const query = uni.createSelectorQuery();
        query.select('.ai-summary-list').boundingClientRect();
        query.exec((res) => {
          if (res && res[0]) {
            // 计算滚动位置为区域的最大高度
            aiSummaryScrollTop.value = res[0].height * 1000; // 使用一个足够大的值确保滚动到底部
            console.log('AI总结滚动到底部，高度:', aiSummaryScrollTop.value);
          }
        });
      });
    }, 100);
  }
};

// 保存AI总结消息到缓存
const saveAiSummaryToCache = () => {
  try {
    // 转换日期对象为时间戳，以便JSON序列化
    const cachableMessages = aiSummaryMessages.value.map(msg => ({
      ...msg,
      time: msg.time instanceof Date ? msg.time.getTime() : msg.time
    }));
    
    uni.setStorageSync('ai_summary_messages', JSON.stringify(cachableMessages));
    console.log('AI总结消息已保存到缓存, 数量:', cachableMessages.length);
  } catch (e) {
    console.error('保存AI总结消息到缓存失败:', e);
  }
};

// 从缓存加载AI总结消息
const loadAiSummaryFromCache = () => {
  try {
    const cachedData = uni.getStorageSync('ai_summary_messages');
    if (cachedData) {
      const parsedData = JSON.parse(cachedData);
      
      // 将时间戳转回Date对象
      aiSummaryMessages.value = parsedData.map(msg => ({
        ...msg,
        time: new Date(msg.time)
      }));
      
      console.log('从缓存加载AI总结消息, 数量:', aiSummaryMessages.value.length);
      
      // 加载后滚动到底部
      if (aiSummaryMessages.value.length > 0) {
        setTimeout(() => {
          scrollAiSummaryToBottom();
        }, 300);
      }
    }
  } catch (e) {
    console.error('从缓存加载AI总结消息失败:', e);
    aiSummaryMessages.value = [];
  }
};

// 清空AI总结消息及缓存
const clearAiSummary = () => {
  aiSummaryMessages.value = [];
  uni.removeStorageSync('ai_summary_messages');
  uni.showToast({
    title: 'AI总结记录已清空',
    icon: 'success'
  });
};

// 获取会议详情
const fetchMeetingDetail = async () => {
  if (!meetId.value) {
    console.error('会议ID为空，无法获取会议详情');
    return;
  }
  
  try {
    console.log('开始获取会议详情，meetId:', meetId.value);
    const res = await getMeetingDetail(meetId.value);
    console.log('会议详情获取成功:', res);
    meetDetail.value = res;
    
    // 如果URL没有传递完整会议信息，则用API返回的数据更新
    if (res.title && meetingInfo.title === '会议标题加载中...') {
      meetingInfo.title = res.title;
    }
    if (res.time && meetingInfo.time === '加载中...') {
      meetingInfo.time = res.time;
    }
    if (res.location && meetingInfo.location === '加载中...') {
      meetingInfo.location = res.location;
    }
    if (res.browse !== undefined && res.browse !== null) {
      meetingInfo.browse = res.browse;
    }
    if (res.video) {
      meetingInfo.video = res.video;
    }
    if (res.isOnline !== undefined) {
      meetingInfo.isOnline = res.isOnline ? 1 : 0;
    }
    
    // 更新会议议程数据
    if (res && res.agenda) {
      console.log('原始议程数据:', res.agenda);
      // 尝试解析议程数据，它可能是JSON字符串或对象数组
      let agendaData = res.agenda;
      
      // 如果是字符串，尝试解析
      if (typeof agendaData === 'string') {
        try {
          agendaData = JSON.parse(agendaData);
          console.log('解析后的议程数据:', agendaData);
        } catch (e) {
          console.error('议程数据解析失败:', e);
          agendaData = []; // 解析失败时设为空数组
        }
      }
      
      // 更新会议议程
      timelineData.value = formatAgendaData(agendaData);
      console.log('格式化后的议程数据:', timelineData.value);
    } else {
      console.log('无议程数据');
      timelineData.value = [];
    }
  } catch (error) {
    console.error('获取会议详情失败:', error);
    uni.showToast({ title: '获取会议详情失败', icon: 'none' });
  }
};

// 格式化议程数据为时间轴格式
const formatAgendaData = (agendaData) => {
  if (!agendaData || !Array.isArray(agendaData) || agendaData.length === 0) {
    console.log('议程数据无效或为空');
    return [];
  }
  
  console.log('开始格式化议程数据');
  return agendaData.map(item => {
    let startTime = '';
    let endTime = '';
    
    // 处理开始时间，只保留时分
    if (item.startTime) {
      try {
        // 尝试将时间戳转换为可读时间，只保留时分
        if (typeof item.startTime === 'number') {
          const date = new Date(item.startTime);
          startTime = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
        } else if (typeof item.startTime === 'string') {
          // 如果是ISO格式的时间字符串或其他格式，提取时分
          if (item.startTime.includes('T')) {
            // ISO格式 例如: 2025-03-16T06:30:10.000Z
            const parts = item.startTime.split('T')[1].split(':');
            startTime = `${parts[0]}:${parts[1]}`;
          } else {
            // 保留原始格式
            startTime = item.startTime;
          }
        } else {
          startTime = item.startTime;
        }
      } catch (e) {
        console.error('处理开始时间出错:', e);
        startTime = item.startTime;
      }
    }
    
    // 处理结束时间，只保留时分
    if (item.endTime) {
      try {
        if (typeof item.endTime === 'number') {
          const date = new Date(item.endTime);
          endTime = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
        } else if (typeof item.endTime === 'string') {
          // 如果是ISO格式的时间字符串或其他格式，提取时分
          if (item.endTime.includes('T')) {
            // ISO格式
            const parts = item.endTime.split('T')[1].split(':');
            endTime = `${parts[0]}:${parts[1]}`;
          } else {
            // 保留原始格式
            endTime = item.endTime;
          }
        } else {
          endTime = item.endTime;
        }
      } catch (e) {
        console.error('处理结束时间出错:', e);
        endTime = item.endTime;
      }
    }
    
    // 返回格式化后的数据
    return {
      time: startTime + (endTime ? ` - ${endTime}` : ''),
      title: item.title || '未命名议程',
      content: item.description || '',
      speaker: item.speaker || '未指定',
      status: 'default' // 默认状态
    };
  });
};

// 初始化函数
onMounted(() => {
  console.log('页面onMounted');
  // 获取页面参数
  const query = uni.getLaunchOptionsSync().query || {};
  
  // 从URL参数或者页面参数中获取会议ID
  const eventChannel = getApp().globalData.eventChannel;
  const options = uni.getLaunchOptionsSync();
  console.log('初始化获取参数:', options);
  
  // 解析URL参数
  parseQueryParams();
  
  // 如果meetId存在，则使用它，否则尝试从其他来源获取
  if (meetId.value) {
    console.log('会议ID已通过URL参数获取:', meetId.value);
  } else {
    // 从全局数据或页面参数中获取会议ID
    if (eventChannel && eventChannel.meetId) {
      meetId.value = eventChannel.meetId;
      console.log('会议ID从事件通道获取:', meetId.value);
    } else if (query.meetId) {
      meetId.value = query.meetId;
      console.log('会议ID从URL参数获取:', meetId.value);
    } else {
      // 如果没有会议ID，显示错误信息
      console.error('无法获取会议ID');
      uni.showToast({
        title: '无法获取会议信息',
        icon: 'none'
      });
    }
  }
  
  // 如果meetId存在，且meetingInfo基本字段不完整，则获取会议详情
  if (meetId.value && (meetingInfo.title === '会议标题加载中...' || !meetingInfo.video)) {
    console.log('会议信息不完整，获取详情...');
    fetchMeetingDetail();
  }
  
  // 初始化聊天室（如果激活的是聊天室标签）
  if (activeSegment.value === 0) {
    initSocket();
  }
  
  // 监听页面显示事件
  uni.$on('detail-page-show', () => {
    console.log('页面显示事件触发');
    if (activeSegment.value === 0 && !socket) {
      initSocket();
    } else if (activeSegment.value === 4 && !aiSummarySocket) {
      initAiSummary();
    }
  });
});

// 页面卸载时的清理函数
onUnmounted(() => {
  console.log('页面onUnmounted');
  // 关闭所有WebSocket连接
  closeChatSocket();
  closeAiSummarySocket();
  // 移除事件监听
  uni.$off('detail-page-show');
});
</script>

<style scoped lang="scss">
/* 设置统一的滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 聊天室容器滚动样式 */
.message-list {
  flex: 1;
  padding: 12rpx;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 资料下载容器滚动样式 */
.scroll-view {
  width: 100%;
  height: 70vh;
  scrollbar-width: thin;
}

/* 议程容器滚动样式 */
.agenda-container {
  padding: 15px;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

//视频
.video {
  width: 100%;
  background-color: #000;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.video video {
  width: 100%;
  display: block;
}

//标题
.bigtitle {
  width: 100%;
  padding: 0;
  background-color: #f5f5f5;
}

.card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #00287d, #0046ad);
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.left-content {
  flex: 1;
  overflow: hidden;
}

.title-row {
  margin-bottom: 8px;
}

.title {
  font-size: 15px;
  font-weight: bold;
  color: #ffffff !important;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
}

.location-item {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text {
  font-size: 12px;
  color: #ffffff;
  margin-left: 4px;
}

.navigate-button {
  margin-left: 8px;
}

.button {
  background-color: #ffffff;
  color: #00287d;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.segment {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  padding: 15px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.segment-item {
  font-size: 15px;
  color: #666;
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.segment-item.active {
  color: #00287d;
  font-weight: bold;
  border-bottom: 3px solid #00287d;
}

.segment-content {
  flex: 1;
}

/* 聊天室样式 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: var(--chat-container-height, 50vh);
  background-color: #f5f5f5;
  overflow: hidden;
}

.message-item {
  display: flex;
  margin-bottom: 20rpx;
  position: relative;
  clear: both;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.message-content {
  display: flex;
  flex-direction: column;
  margin-left: 100rpx;
  max-width: 70%;
}

.info {
  display: flex;
  align-items: center;
  margin-bottom: 5rpx;
}

.nickname {
  font-size: 24rpx;
  color: #999;
  margin-right: 10rpx;
}

.time {
  font-size: 20rpx;
  color: #999;
}

.message-text {
  background-color: #fff;
  padding: 15rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #333;
  width: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
}

.user-message {
  flex-direction: row-reverse;
}

.user-message .avatar {
  left: auto;
  right: 0;
}

.user-message .message-content {
  margin-left: 0;
  margin-right: 100rpx;
  align-items: flex-end;
}

.user-message .message-text {
  background-color: #95ec69;
}

.input-container {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eaeaea;
}

.input-box {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  border: 1rpx solid #ccc;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.send-button {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #07c160;
  border-radius: 40rpx;
}

/* 资料下载 */
.download-container {
  padding:0 40rpx 40rpx 40rpx;
  background-color: #f5f5f5;
}

.download-card {
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.card-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  flex-grow: 1;
}

.download-button {
  background-color: #007aff;
  color: #ffffff;
  font-size: 25rpx;
  padding: 0rpx 10rpx;
  border-radius: 8rpx;
  border: none;
}

.cover-image {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.card-body {
  display: block;
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
}
/*会议下载*/
.agenda-container {
  padding: 15px;
  height: 100%;
  overflow-y: auto;
}
/* 议程卡片 */
.agenda-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx;
}
.timeline {
  position: relative;
  padding: 10px 0;
}

.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 25px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
    border-radius: 50%;
  background-color: #007AFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

.timeline-item:not(:last-child)::after {
  content: '';
    position: absolute;
  left: 5px;
  top: 17px;
  bottom: -25px;
  width: 2px;
  background-color: #e0e0e0;
}

.timeline-content {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.time-section {
  margin-bottom: 8px;
}

.time {
  color: #007AFF;
  font-weight: bold;
  font-size: 14px;
}

.content-section {
    display: flex;
  flex-direction: column;
}

.agenda-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333333;
}

.speaker {
  font-size: 14px;
    color: #666;
  margin-bottom: 5px;
}

.description {
  font-size: 14px;
  color: #777;
  line-height: 1.4;
}

/* 状态样式 */
.timeline-item.past .timeline-dot {
  background-color: #8e8e93;
}

.timeline-item.current .timeline-dot {
  background-color: #FF9500;
  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.3);
}

/* AI总结样式 */
.ai-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eaeaea;
}

.ai-summary-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.clear-button {
    font-size: 24rpx;
  color: #007aff;
  background: none;
  border: none;
  padding: 10rpx;
}

.empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
    color: #999;
  font-size: 28rpx;
  }

/* 让AI总结消息样式保持一致但有所区分 */
.ai-summary-list .message-text {
  background-color: #e6f7ff;
  border-left: 4rpx solid #1890ff;
}

</style>
